<template>
  <div class="repairWorkOrderDetail" v-if="detailForm">
    <el-dialog
      title="详情"
      :visible.sync="centerDialogVisible"
      width="85%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :before-close="close"
      class="dialog"
      
      >
      <div style="width:1400px;margin:auto;">
    <el-row>
      <el-col :span="13" style="height:75vh;overflow:scroll;padding:0 50px">
        <div class="header">
          <h4>设备信息</h4>
          <!-- <el-button v-if="!pageName" icon="el-icon-refresh-right" size="mini" type="primary" class="btnCyan" @click="revocation">撤销</el-button>
          <el-button v-if="!pageName" icon="el-icon-s-cooperation" size="mini" type="primary" class="btnCyan">申请资料</el-button> -->
        </div>
        <table class="table oranges">
          <tr>
            <td>设备名称</td>
            <td>{{detailForm.devicesName}}</td>
            <td>设备编号</td>
            <td>{{detailForm.deviceCode}}</td>
          </tr>
          <tr>
            <td>存放地址</td>
            <td colspan="3">{{detailForm.repositoryName}}</td>
          </tr>
          <tr>
            <td>所属部门</td>
            <td colspan="3">{{detailForm.deptName}}</td>
          </tr>
        </table>
        <h4>报修信息</h4>
        <table class="table table1" rules="all" border="1">
          <tr>
            <td>报修单号</td>
            <td>{{detailForm.oddNumber}}</td>
            <td>报障时间</td>
            <td>{{detailForm.theRepairTime}}</td>
            <td>报修人</td>
            <td>{{detailForm.repairsUserName}}</td>
          </tr>
          <tr>
            <td>工程名称</td>
            <td>{{detailForm.projectName}}</td>
            
            <td>故障类型</td>
            <td>{{detailForm.faultTypeName}}</td>
            <td>故障等级</td>
            <td>
              <span v-show="detailForm.faultState==1">一般</span>
              <span v-show="detailForm.faultState==2">严重</span>
              <span v-show="detailForm.faultState==3">紧急</span>
              <span v-show="detailForm.faultState==4">技术改造</span>
            </td>
          </tr>
          <tr>
            <td>报障部门</td>
            <td colspan="5">{{detailForm.department}}</td>
          </tr>
          <tr>
            <td>故障描述</td>
            <td colspan="5">{{detailForm.repairsDescribe}}</td>
          </tr>
          <tr>
            <td>故障图片</td>
            <td colspan="5">
              <div class="unloadBox">
                <div class="img" v-for="(item,index) in detailForm.deviceReportForRepairAccessories">
                  <el-image :src="baseUrl()+item.accessoryUrl" :preview-src-list="[baseUrl()+item.accessoryUrl]"></el-image>
                  <!-- <i class="el-icon-close" @click="imgDel(index,item.accessoryUrl)"></i> -->
                </div>
              </div>
            </td>
          </tr>
        </table>
        <h4>维修费用<span @click="consumable">耗材对比</span></h4>
        <el-table show-summary v-loading="loading" :data="detailForm.deviceReportForRepairCosts" border>
          <el-table-column label="序号" type="index" align="center"/>
          <el-table-column label="名称" prop="deviceName" align="center"/>
          <!-- <el-table-column label="使用人" prop="userName"/> -->
          <el-table-column label="数量" prop="number" align="center"/>
          <el-table-column label="单价" prop="unitPrice" align="center"/>
          <el-table-column label="小计" prop="subtotal" align="center"/>
        </el-table>
        <h4>维修记录</h4>
        <el-table v-loading="recordLoading" :data="detailForm.deviceReportForRepairRecords" border highlight-current-row @row-click="rowEvent">
          <el-table-column label="序号" type="index" align="center"/>
          <el-table-column label="处理时间" prop="processingDatetime" align="center" width="170"/>
          <el-table-column label="处理人" prop="responsibleUserName" align="center"/>
          <el-table-column label="处理内容" prop="processingContent" align="center" show-overflow-tooltip/>
          <el-table-column label="动作" prop="action" align="center">
            <template slot-scope="scope">
              {{scope.row.action|action}}
            </template>
          </el-table-column>
        </el-table>
        <!-- <pagination
          :total="recordTotal"
          :page.sync="recordForm.pageNum"
          :limit.sync="recordForm.pageSize"
          @pagination="getRecordList"
        /> -->
        <revocation v-if="revocationDialog" @selectChange="revocationChange" :revocaData="revocaData"></revocation>
        <consumable v-if="consumableDialog" @subSetChane="consumableChange" :pid="pid"></consumable>
      </el-col>
      <el-col :span="11" style="padding:0 50px" v-if="info">
        <h4>维修记录详情</h4>
        <table class="table table1" rules="all" border="1">
          <tr>
            <td>报修单号</td>
            <td>{{info.reportForRepairOddNumber}}</td>
            <td>负责人</td>
            <td>{{info.responsibleUserName}}</td>
          </tr>
          <tr>
            <td>处理时间</td>
            <td>{{info.processingDatetime}}</td>
            <td>处理结果</td>
            <td>
              <span v-show="info.processingResults==1">未查明原因</span>
              <span v-show="info.processingResults==2">需返厂</span>
              <span v-show="info.processingResults==3">申请物料</span>
              <span v-show="info.processingResults==4">需转交</span>
              <span v-show="info.processingResults==5">已解决</span>
            </td>
          </tr>
          <tr>
            <td>动作</td>
            <td colspan="3">{{info.action|action}}</td>
          </tr>
          <tr>
            <td>处理内容</td>
            <td colspan="3">{{info.processingContent}}</td>
          </tr>
        </table>
        <h4>维修详细费用</h4>
          <el-table :data="info.deviceReportForRepairCosts" border show-summary>
            <el-table-column label="设备名称" align="center" prop="deviceName"/>
            <el-table-column label="使用人" align="center" prop="userName"/>
            <el-table-column label="数量" align="center" prop="number"/>
            <el-table-column label="单价" align="center" prop="unitPrice"/>
            <el-table-column label="小计" align="center" prop="subtotal"/>
          </el-table>
      </el-col>
    </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {reportRepairDess,recordListDes} from '@/api/repair/index'
  import revocation from "./revocation";
  import consumable from "@/views/conserve/consumable"
  export default {
    name: "repairWorkOrderDetail.vue",
    components:{
      revocation,
      consumable
    },
    props:['pid'],
    data() {
      return {
        detailForm: null,
        loading: false,
        list: '',
        recordLoading:false,
        recordList:'',
        recordTotal:0,
        recordForm:{
          pageNum:1,
          pageSize:10,
        },
        revocationDialog:false,
        pageName:'',
        centerDialogVisible:true,
        consumableDialog:false,
        pid:null,
        info:null
      }
    },
    created() {
      
      this.getData()
    },
    methods: {
      close(){
        this.$emit('subSetChane')
      },
      getData(){
        reportRepairDess(this.pid).then((res)=>{
          if(res.code==200){
            this.detailForm=res.data
          }
        })
      },
      consumable() {
        // this.$router.push({path: '/conserve/consumable', query: {data: this.detailForm}});
        this.pid=this.detailForm.id
        this.consumableDialog=true
      },
      consumableChange(){
        this.consumableDialog=false
        this.pid=null
      },
      getRecordList(){

      },
      //撤销
      revocation(row){
        this.revocaData=row
        this.revocationDialog=true
      },
      //成功回调
      revocationChange(data){
        this.revocationDialog=false
      },
      rowEvent(row, column, event){
console.log(row, column, event)
        recordListDes(row.id).then((res)=>{
          if(res.code==200){
            this.info=res.data
          }
        })
      }
    },
    filters:{
      action(key){
        let str
        switch (key) {
          case 1:
            str='报修'
            break;
          case 2:
            str='已分派'
            break;
          case 3:
            str='接收'
            break;
          case 4:
            str='维修'
            break;
          case 5:
            str='领料申请'
            break;
          case 6:
            str='撤销'
            break;
          case 7:
            str='已解决'
            break;
          case 8:
            str='验收通过'
            break;
          case 9:
            str='验收不通过'
            break;
          case 10:
            str='外委维修'
            break;
          default:
            break;
        }
        return str
      }
    }
  }
</script>

<style scoped lang="scss">
  .repairWorkOrderDetail {
    margin-left: 20px;
    margin-bottom: 40px;
    .dialog >>> .el-dialog__body{
      height: 85vh;
      overflow: scroll;
      padding: 0 50px;
    }
    .header {
      width: 100%;

      h4 {
        float: left;
      }

      .btnCyan {
        background: #66C9B7;
        border: 1px solid #66C9B7;
        float: right;
        margin: 15px 5px 0 0;
      }
    }

    h4 {
      color: #05A380;

      span {
        float: right;
        color: #2196F3;
        cursor: pointer;
      }
    }

    .oranges {
      border: none !important;

      tr {
        td:nth-child(2n) {
          color: orange;
        }
      }
    }

    .table {
      border: 1px solid #cccccc;
      color: #606266;
      font-size: inherit;
      width: 100%;

      .height {
        height: 120px;
      }

      tr {
        td:nth-child(2n-1) {
          width: 20%;
          text-align: center;
        }

        td:nth-child(2n) {
          width: 30%;
          padding-left: 10px;
        }

        td {
          line-height: 35px;
        }
      }
    }

    .table1 {
      tr {
        td:nth-child(2n-1) {
          width: 10%;
          text-align: center;
        }

        td:nth-child(2n) {
          width: 20%;
          padding-left: 10px;
        }
      }
    }
    .unloadBox{
      border: none;
      // border: 1px solid #cccccc;
      margin-top:20px;
      min-height: 50px;
      overflow: hidden;
      .file{
        width:100%;
        border-top:1px #cccccc dotted;
        line-height: 50px;
        .index{
          padding:0 10px;
          color:#666
        };
        i{
          float: right;
          line-height: 50px;
          padding-right: 10px;
          font-size: 20px;
          cursor: pointer;
        }
        .type{
          color: #666;
          float: right;
          padding-right: 30px;
        }

      }
      .img{
        margin:10px 0 10px 10px;
        text-align: center;
        float: left;
        position: relative;
        width:110px;
        height:100px;
        .el-image{
          width:100px;
          height:100px;
          border: 1px solid #cccccc;
          position: absolute;
          top:0;
          left:0;
        }
        i{
          position: absolute;
          right: 0px;
          font-size: 20px;
          top: -4px;
          z-index: 1;
        }
      }



    }
  }
</style>
